<template>
  <div>
    <van-sticky>
      <van-nav-bar
          title="忘记密码"
          left-arrow
          @click-left="onClickLeft"/>
    </van-sticky>
    <van-form @submit="onSubmit">
      <van-row>
        <van-col span="24">
          <van-cell-group>
            <van-field
                v-model="phoneNumber"
                label="手机号"
                placeholder="请输入手机号"
                name="phoneNumber"
                :rules="[
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号',
          },]"
            />
            <van-field
                v-model="sms"
                name="sms"
                center
                clearable
                label="获取验证码"
                placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="primary" @click="selectMobile">发送验证码</van-button>
              </template>
            </van-field>
            <van-field
                v-model="password"
                name="password"
                label="新密码"
                placeholder="请输入密码"
                :rules="[
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/,
            message: '长度在 6 到 12个字符，包含字母数字',
            trigger: 'blur',
          },
        ]"
            />
            <van-field
                v-model="checkPassword"
                label="确认密码"
                name="checkPassword"
                placeholder="请确认密码"
                :rules="[
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/,
            message: '长度在 6 到 12个字符，包含字母数字',
            trigger: 'blur',
          },
        ]"
            />
          </van-cell-group>
        </van-col>
      </van-row>
      <div style="text-align: center">
        <van-button
            round
            type="info"
            native-type="submit"
            style="margin-top: 10px; width: 70%"
        >确认修改
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {Toast, Notify} from "vant";

export default {
  name: "Pass",
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
  data() {
    return {
      phoneNumber: "", //手机号
      sms: "", //验证码
      password: "", //密码
      checkPassword: "", //第二次输入的密码
    }
  },
  methods: {
    jump(uri) {
      this.$router.push(uri);
    },
    // 查询手机号有没有被注册
    selectMobile() {
      this.$http.get("/saleManagement/vip/register/selectPhone?phone=" + this.phoneNumber).then((res) => {
        if (res.data.code === 200) {
          Toast({
            message: "手机号未注册",
            position: 'top',
          });
        } else {
          // 发送验证码
          this.sendCode();
        }
      }).catch(this.handleError);
    },
    // 表单提交
    onSubmit(values) {
      console.log(values);
      if (values.password !== values.checkPassword) {
        this.$notify({type: 'danger', message: "二次密码不正确"});
        return;
      }
      // 验证验证码是否正确
      this.$http.get("/saleManagement/vip/register/checkSms?phone=" + values.phoneNumber + "&code=" + values.sms).then((res) => {
        if (res.data.code === 200) {
          this.updatePass(values);
        } else if (res.data.code === 600) {
          this.$toast({
            message: res.data.msg,
            position: 'top',
          });
        } else {
          // 验证码错误
          this.$toast({
            message: res.data.msg,
            position: 'top',
          });
        }
      }).catch(this.handleError);
    },
    // 更新密码
    updatePass(values) {
      this.$http.put("/saleManagement/vip/register/updatePass", values).then((res) => {
        if (res.data.code === 200) {
          this.$notify({
            type: 'success',
            message: res.data.msg,
          });
          this.$router.push("/login");
        } else {
          this.$notify({
            type: 'danger',
            message: res.data.msg,
          });
        }
      }).catch(this.handleError);
    },
    // 发送验证码的方法
    sendCode() {
      this.$http.post("/saleManagement/vip/register/sendSms?phone=" + this.phoneNumber).then((res) => {
        if (res.data.code === 200) {
          alert("验证码为：" + res.data.data);
          // 发送短信成功
          this.$toast({
            message: res.data.msg,
            position: 'top',
          });
        } else {
          // 重复发送或发送失败
          this.$toast({
            message: res.data.msg,
            position: 'top',
          });
        }
      }).catch(this.handleError);
    },
    // 统一错误处理方法
    handleError(error) {
      console.error('请求失败:', error);
      this.$toast({
        message: '请求失败，请稍后再试',
        position: 'top',
      });
    },
  }
}
</script>

<style scoped>

</style>